<template>

  <router-link to="/"></router-link>
  <router-view></router-view>
  <div class="footer">
    <router-link to="/" class="aa">
      <div @click="selectNav(0)">
        <img :src="footerNav[0].img" alt="">
        <p :class="{ color1: selectedNav === 0 }">{{ footerNav[0].name }}</p>
      </div>
    </router-link>

    <div @click="selectNav(1)">
      <img :src="footerNav[1].img" alt="">
      <p :class="{ color1: selectedNav === 1 }">{{ footerNav[1].name }}</p>
    </div>
    <router-link to="/main" class="aa">
      <div @click="selectNav(2), handleLink">
        <img :src="footerNav[2].img" alt="">
        <p :class="{ color1: selectedNav === 2 }">{{ footerNav[2].name }}</p>
      </div>
    </router-link>

    <div @click="selectNav(3)">
      <img :src="footerNav[3].img" alt="">
      <p :class="{ color1: selectedNav === 3 }">{{ footerNav[3].name }}</p>
    </div>
    <router-link to="/login" class="aa">
      <div @click="selectNav(4)">
        <img :src="footerNav[4].img" alt="">
        <p :class="{ color1: selectedNav === 4 }">{{ footerNav[4].name }}</p>
      </div>
    </router-link>

  </div>

</template>
<script setup>
import { useRouter } from 'vue-router'
import axios from './utils/http.js'
import { provide, ref } from 'vue'

provide('$axios', axios)
const info = ref('数据')
provide('abc', info)
const footerNav = ref([
  { img: '/f01.png', name: '首页', activeImg: '/f1.png' },
  { img: '/f3.png', name: '直播', activeImg: '/f03.png' },
  { img: '/f5.png', name: '课程', activeImg: '/f05.png' },
  { img: '/f2.png', name: '订阅', activeImg: '/f02.png' },
  { img: '/f4.png', name: '我的', activeImg: '/f04.png' }
]);
const selectedNav = ref(0);
const selectNav = (index) => {
  selectedNav.value = index;
  // 更新所有导航项的图片为非活跃状态
  footerNav.value.forEach((navItem, index) => {
    navItem.img = navItem.activeImg;
  });
}
// 路由对象
let router = useRouter()
const handleLink = () => {
  // 编程式导航   push方法中传递的 路由index.js中 routes中path属性值
  router.push('/main')
  console.log('111')
}
</script>
<style>
@import url('./style/app.css');
</style>